<!-- 消息 -->
<template>
	<view>
		<!-- tabs -->
		<u-sticky bgColor="#fff" class="sticky" :style="[{animation: 'show 0.5s 1'}]">
		    <u-tabs
				:list="listTab" 
				:scrollable="scrollable" 
				count="cate_count" 
				:activeStyle="{color:'#171717', fontSize: '14px'}"
				:inactiveStyle="{color:'#C6C6C6', fontSize: '14px'}"
				lineColor="#1E6FFF"
				@change="changeTab"
				:current="currentTab"
			></u-tabs>
			<view v-if="!clickTab" style="width: 750rpx; height: 88rpx; background: transparent;position:absolute; top: 0" ></view>
			<view class="input" :style="[{animation: 'show 0.6s 1'}]">
				<u--input
				    placeholder="搜索"
				    border="null"
					prefixIcon="search"
					prefixIconStyle="font-size: 44rpx;color: #C5C2C6"
					:customStyle="{background: '#FBF8FB'}"
					v-model="form.title"
					@blur="onConfirm"
					@clear="onConfirm"
				  ></u--input>
			</view>
		</u-sticky>
		
		<!-- 单元格信息 -->
		<mescroll-body
			ref="mescrollRef" 
			:up="upOption" 
			@init="mescrollInit" 
			@down="downCallback" 
			@up="upCallback" 
			:style="[{animation: 'show 0.5s 1'}]"
		>
			<template v-if="currentTab == 0">
				<view class="cell-group card_box" v-for="(item,index) in messageList" :key="index" @click="onDetail(item, currentTab)">
					<span v-if="item.isTop && item.isTop == 1"></span>
					<view class="title-content" ><text class="dian" v-if="item.readFlag !=1"></text> {{item.titile}}</view>
					<!-- <view class="content">{{item.msgAbstract}}</view> -->
					<view class="time">{{dateTime(item.sendTime)}}</view>
				</view>
			</template>
			<template v-else>
				<view class="" v-for="(item,index) in messageList" :key="index" style="margin: 20rpx;">
					<view class="content card_box" @click="onDetail(item, currentTab)">
						<view class="content-left" :style="item.imageHref?'padding-right: 16rpx;': 'padding-right: 0rpx;'" >
							<view class="nos-title newheight" >
								<view class="topping" v-show="item.isTop == '1'">置顶</view>
								<view class="title-content" :style="{ textIndent: item.isTop == '1'?'2.6rem':'0' }">{{ item.title }}</view>
							</view>
							<view class="introduction-time">
								<view class="time">{{item.publishTime}}</view>
								<view class="">
									<text
										class="text"
										:class="item.readStatus && item.readStatus ==1? 'text-success' : ''"
									>{{item.readStatus && item.readStatus ==1 ? '已读' : '未读'}}</text>
									<text
										class="text"
										style="margin-left: 10rpx;"
										v-show="item.progress"
										:class="item.signStatus && item.signStatus ==1? 'text-success' : ''"
									>{{item.signStatus && item.signStatus ==1 ? '已签发' : '未签发'}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="btn" v-if="currentTab == 2 && item.progress" @click.stop="onClaim(item)">签发</view>
				</view>
			</template>
		</mescroll-body>
		<tabbar :value="2" ></tabbar>
	</view>
</template>

<script>
	import http from '@/utils/request'
	import { 
		messageInfoList, // 消息列表
		newsInfoList,// 新闻资讯列表
		eoaCmsMenuSelectTree
	} from '../../api/index.js'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import tabbar from '@/components/tabbar.vue'
	import {dateTime} from '@/utils/common.js'
	import {imageUrl} from '@/utils/common.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			tabbar
		},
		data() {
			return {
				imageUrl,
				scrollable: false,
				dateTime,
				clickTab: true, // 判断当数据完全请求回来了才能点击tabs
				upOption:{
					// page: {
					// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty:{
						tip: '~ 暂无相关数据 ~', // 提示
					}
				},
				form:{
					title: ''
				},
				listTab: [
					{
						name: '协同提醒',
						 badge: {
							isDot: false
						}
					},
					{
						name: '通知公告',
						 badge: {
							isDot: false
						}
					},
					{
						name: '意见征集',
						 badge: {
							isDot: false
						}
					}
				],
				messageList: [], // 告警信息列表
				
				currentTab: 0, // tab值默认0
				warningMessage: true, // 告警信息展示
				informationBulletin: false, // 信息公告展示
			}
		},
		onLoad() {
			uni.hideTabBar()
			// this.eoaCmsMenuSelectTreeList() // tabs栏
		},
		onShow() {
			// this.eoaCmsMenuSelectTreeList() // tabs栏
			if (this.mescroll && this.mescroll.resetUpScroll()) {
				this.mescroll.resetUpScroll()
			}
			
		},
		methods: {
			// 下拉加载
			upCallback(page) {
				if (this.currentTab == 0) {
					this.getWarningMessageList(page.num, page.size) // 協同提醒列表
				}
				else if (this.currentTab == 1) {
					this.getNewsInfoList(page.num, page.size)
				} else {
					this.getAnnouncementMessageList(page.num, page.size) // 公告通知列表
				}
			},
			
			// 获取tab栏
			eoaCmsMenuSelectTreeList () {
				var params = {
					column: 'createTime',
					order: 'desc',
					pageNo: 1,
					pageSize: 100
				}
				eoaCmsMenuSelectTree(params).then(res => {
					this.listTab = [
						{
							name: '协同提醒',
							key: '1',
							 badge: {
								isDot: false
							}
						},
					]
					if (res.result.records && res.result.records.length) {
						if (res.result.length <= 3) {
							this.scrollable = false
						} else {
							this.scrollable = true
						}
						res.result.records.map(value => {
							this.listTab.push({
								name: value.menuName,
								key: value.id,
								badge: {
									value: 0,
								}
							})
						})
					}
					this.mescroll.resetUpScroll() // 重置列表数据
				}).catch(res => {
					
				})
			},
			
			// 获取協同提醒列表
			getWarningMessageList (pageNo, pageSize) {
				var params = {
					msgCategory: 2,
					pageNo: pageNo,
					pageSize:pageSize,
					titile: this.form.title
				}
				messageInfoList(params).then(res => {
					this.mescroll.endByPage(res.result.records.length, res.result.total);
					if (res.success) {
						this.clickTab = true
						this.listTab[0].badge.value = res.result.unread
						if(pageNo == 1) this.messageList = []; //如果是第一页需手动置空列表
						this.messageList = this.messageList.concat(res.result.records); //追加新数据
					}
				}).catch(res => {
					//联网失败, 结束加载
					this.mescroll.endErr();
					this.clickTab = true
				})
			},
			
			// 获取公告通知
			getNewsInfoList (pageNo, pageSize) {
				var params = {
					bpmStatus: 3, // 是否发布
					column: 'createTime',
					permissionType: 1,
					order: 'desc',
					pageNo: pageNo,
					pageSize:pageSize
				}
				if (this.form.title) {
					params.title = this.form.title
				}
				http.get('/api/erp/publishNotice/listPage', params).then(res => {
					this.mescroll.endByPage(res.result.records.length, res.result.total);
					if (res.success) {
						this.clickTab = true
						// this.listTab[1].badge.value = res.result.unread
						if(pageNo == 1) this.messageList = []; //如果是第一页需手动置空列表
						this.messageList = this.messageList.concat(res.result.records); //追加新数据
					}
				}).catch(res => {
					//联网失败, 结束加载
					this.mescroll.endErr();
					this.clickTab = true
				})
			},
			// 获取签发意见
			getAnnouncementMessageList (pageNo, pageSize) {
				var params = {
					bpmStatus: 3, // 是否发布
					column: 'createTime',
					permissionType: 1,
					order: 'desc',
					pageNo: pageNo,
					pageSize:pageSize
					
				}
				if (this.form.title) {
					params.title = this.form.title
				}
				http.get('/api/erp/publishCollect/listPage', params).then(res => {
					this.mescroll.endByPage(res.result.records.length, res.result.total);
					if (res.success) {
						this.clickTab = true
						// this.listTab[1].badge.value = res.result.unread
						if(pageNo == 1) this.messageList = []; //如果是第一页需手动置空列表
						this.messageList = this.messageList.concat(res.result.records); //追加新数据
					}
				}).catch(res => {
					//联网失败, 结束加载
					this.mescroll.endErr();
					this.clickTab = true
				})
			},
			
			
			
			// tab点击事件
			changeTab (item) {
				this.currentTab = item.index
				this.clickTab = false
				this.messageList = []
				this.mescroll.resetUpScroll()
			},
			
			// 点击进入详情
			onDetail (item, index) {
				if (index == 0) {
					let orderData = JSON.stringify(item)
					 let newStr = orderData.replace(/%/g, '%25');
					 var value = encodeURIComponent(newStr)
					uni.navigateTo({
						url: `/pages/message/detail?item=${value}&index=${index}`
					})
				} else if (index == 1) {
					uni.navigateTo({
						url: `/pages/message/noticeMessageDetail?id=${item.id}&progress=${item.progress}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/message/opinionMessageDetail?id=${item.id}&progress=${item.progress}&onlyLook=1`
					})
				}
				 
			},
			
			// input点击确定
			onConfirm () {
				this.messageList = []// 先置空列表,显示加载进度
				this.mescroll.resetUpScroll() // 再刷新列表数据
			},
			// 点击签发
			onClaim (item) {
				uni.navigateTo({
					url: `/pages/message/opinionMessageDetail?id=${item.id}&progress=${item.progress}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.sticky{
		padding-bottom: 20rpx;
		.input{
			margin: 20rpx 40rpx 0 40rpx;
		}
	}	


// 单元格
.cell-group{
	margin: 20rpx;
	background: #FFFFFF;
	box-shadow: 0px 4rpx 20rpx 0px rgba(0,0,0,0.05);
	border-radius: 8rpx;
	padding: 26rpx 0rpx 26rpx 32rpx;
	.title{
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #171717;
		width: 634rpx;
		overflow: hidden; /*超出隐藏*/
		text-overflow: ellipsis;/*隐藏后添加省略号*/
		white-space: nowrap;/*强制不换行*/
		.dian {
			content:'';
			display: inline-block;
			width:5px;
			height:5px;
			background:#FF4747;
			border-radius: 50%;
			margin-right:6rpx;
			margin-bottom: 4rpx;
		}
	}
	.content{
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #7F7F7F;
		padding: 24rpx 0;
	}
	.time{
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #C6C6C6;
	}
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card_box {
  position: relative;
  cursor: pointer;
  transition: all .3s;
}
.card_box span {
  position: absolute;
  overflow: hidden;
  width: 100rpx;
  height: 100rpx;
  top: 0px;
  right: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card_box span::before {
  content: '置顶';
  position: absolute;
  width: 150%;
  height: 40rpx;
  background-image: linear-gradient(45deg, #1E6FFF 0%, #669DFF  100%);
  transform: rotate(-315deg) translateY(-22rpx);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 -5px 10px rgba(0,0,0,0.23);
}

.card_box span::after {
  content: '';
  position: absolute;
  width: 10px;
  bottom: 0;
  left: 0;
  height: 10px;
  z-index: -1;
  box-shadow: 140px -140px #cc3f47;
  background-image: linear-gradient(45deg, #FF512F 0%, #F09819  51%, #FF512F  100%);
}

.card_box:active {
 box-shadow: 0 8px 50px #23232333;
 // border-radius: 20rpx 20rpx 0 0;
}


// 公司文章管理
.content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	// margin: 20rpx;
	background: #FFFFFF;
	box-shadow: 0px 4rpx 20rpx 0px rgba(0,0,0,0.05);
	border-radius: 8rpx;
	padding: 20rpx 20rpx 20rpx 16rpx;
	.content-left{
		text-align: justify;
		flex: 1;
	}
	.content-right{
		width: 228rpx;
		height: 128rpx;
	}
}
.nos-title{
	position: relative;
	.topping{
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #1E6FFF;
		// height: 40rpx;
		line-height: 16px;
		padding: 4rpx 12rpx;
		background: rgba(30, 111, 255, 0.1);
		border-radius: 2px;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.title-content{
		font-size: $uni-font-size-base;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		line-height: 20px;
		color: rgba(0,0,0,0.9);
		word-break: break-all;
		word-wrap:break-word;
		display: -webkit-box;//谷歌
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;//显示几行
		overflow: hidden;
	}
}
.newheight{
	height: 100rpx;
}
.introduction-time{
	font-size: $uni-font-size-sm;
	color: #B2B2B2;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	line-height: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.text {
		padding: 5rpx 10rpx;
		background-color: #f3f4f6;
		border-radius: 5rpx;
	}
	.text-success {
		background-color: #18b566;
		color: #fff;
	}
}
.btn{
		text-align: center;
		padding: 20rpx 0;
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #1E6FFF;
		background-color: #FFFFFF;
	}
</style>
